<!-- updated 2022/1/30-->
<template>
  <div class="zui-deletable" :class="{ 'hover-shadow': hoverShadow }">
    <slot></slot>
    <!-- <div v-if="show" class="delete-wrap">
      <el-popconfirm
        v-if="needPrompt"
        :confirm-button-text="confirmText"
        :cancel-button-text="cancelText"
        icon-color="red"
        :title="promptTitle"
        @confirm="onDelete"
      >
        <template #reference>
          <button class="delete-btn" :class="[size]"><i class="iconfont icon-x"></i></button>
        </template>
      </el-popconfirm>
      <button v-else class="delete-btn" :class="[size]" @click="onDelete"><i class="iconfont icon-x"></i></button>
    </div> -->
  </div>
</template>

<script>
export default {
  emits: ['delete'],
  props: {
    /**
     * 大小【large：默认，small】
     */
    size: {
      type: String,
      default: 'large'
    },
    show: {
      type: Boolean,
      default: true
    },
    hoverShadow: {
      type: Boolean,
      default: false
    },
    needPrompt: {
      type: Boolean,
      default: true
    },
    promptTitle: {
      type: String,
      default: '确认删除?'
    },
    confirmText: {
      type: String,
      default: '删除'
    },
    cancelText: {
      type: String,
      default: '取消'
    }
  },
  methods: {
    onDelete() {
      this.$emit('delete')
    }
  }
}
</script>

<style lang="scss" scoped>
.zui-deletable {
  position: relative;
  cursor: pointer;
  transition: all 0.2s ease-in;

  &.hover-shadow:hover {
    opacity: 0.8;
    box-shadow: 0px 0px 12px 3px rgba($color: var(--zui-color-primary), $alpha: 0.4);
  }

  .delete-btn {
    position: absolute;
    top: -16px;
    right: -16px;
    width: 24px;
    height: 24px;
    border: 1px solid var(--zui-color-border-light);
    border-radius: 12px;
    box-sizing: border-box;
    background: #ffffff;
    box-shadow: var(--zui-box-shadow);
    color: var(--zui-color-text-placeholder);
    transition: all 0.2s ease-in-out;
    font-weight: bold;
    color: var(--zui-color-red);
    &.small {
      top: -12px;
      right: -12px;
      width: 20px;
      height: 20px;
      .iconfont {
        font-size: 12px;
      }
    }
  }
}
</style>
